<template>

	<view class="bigbox">
		<view class="fixtab">
			
			广东省中医院
		</view>
		<view class="bigimages">
			<image :src="itemany.componentConfig[0].config.backImg[0].imageUrl" mode=""></image>
		</view>
		<!-- <view class="" style="height: 240px;"></view> -->
		<view class="container">
			<!-- 分类 -->
			<view class="classify">
				<view class="classify-item" v-for="(item,index) in itemany.componentConfig[3].config.data" key="item.id"
					@click="topay(index)">
					<view class="small-classify-image">
						<image :src="item.icon" mode=""></image>
					</view>
					<text class="size">{{item.name}}</text>
					<view class="size-about">
						{{item.desc}}
					</view>
				</view>
			</view>


			<!-- 门诊住院选项 -->
			<view class="chang">
				<view class="chang-title">
					<view :class="['outpatient-chang',{fonttobig:tabindex==0}]" @click="changeshowFun">
						门诊
					</view>
					<view :class="['in-hospital-chang',{fonttobig:tabindex==1}]" @click="changeunshowFun">
						住院
					</view>
				</view>

				<!-- 原生切换主要内容 -->
				<view class="chang-main">
					<!-- 门诊 -->
					<view class="outpatient " v-if="showtab">

						<view class="swiper-item-main-item"
							v-for="(out,index) in itemany.componentConfig[4].config.subData[0].data" key="item.id"
							@tap="tootheritem(index)">
							<image :src="out.icon" mode=""></image>
							<text>{{out.name}}</text>
						</view>
						<view class="swiper-item-main-item">
							<image src="" mode=""></image>
							<text></text>
						</view>

					</view>
					<!-- 住院 -->
					<view class="outpatient " v-else>

						<view class="swiper-item-main-item"
							v-for="out in itemany.componentConfig[4].config.subData[1].data" key="item.id">
							<image :src="out.icon" mode=""></image>
							<text>{{out.name}}</text>
						</view>


					</view>
				</view>
			</view>
			<!-- 特色服务 -->
			<view class="feature">
				<view class="feature-title">特色服务</view>
				<view class="feature-main">
					<view class="feature-item" v-for=" (feature,index) in itemany.componentConfig[5].config.data"
						key="item.id" @click="tofeature(index)">
						<image class="feature-bgimg" :src="feature.icon" mode=""></image>
						<view class="feature-item-title">

							{{feature.name}}
						</view>
						<view class="minititle">
							{{feature.desc}}
						</view>
					</view>
				</view>
				
			</view>	
			<view style="height: 100rpx;"></view>

		</view>
	</view>


</template>

<script>
	import {
		data
	} from "./data.js"
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				showtab: true,
				styleFont: true,
				tabindex: 0,
				itemany: ""
			}
		},
		onLoad() {
			console.log(JSON.parse(data.data))
			this.itemany = JSON.parse(data.data)
			console.log(this.itemany.componentConfig[0].config.backImg[0].imageUrl)
		},
		methods: {

			topay(index) {
				if (index == 1) {
					uni.navigateTo({
						url: "../../pages/paymoney/paymoney"
					})
				} else if (index == 0) {
					uni.navigateTo({
						url: '../../pages/Visits/Visits'
					})
				}

			},


			changeshowFun() {
				this.showtab = true
				this.tabindex = 0
			},

			changeunshowFun() {
				this.showtab = false
				this.tabindex = 1
			},
			tootheritem(index) {
				console.log(index);
				if (index == 1) {
					uni.navigateTo({
						url: "../../pages/RegistrationRecord/RegistrationRecord"
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: "../../pages/PaymentRecords/PaymentRecords"
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: "../../pages/onertle/onertle"
					})
				}
			},
			tofeature(index) {
				if (index == 2) {
					uni.navigateTo({
						url: "../check/check"
					})
				}
			}
		},

		watch: {
			tabindex: function() {
				console.log(this.tabindex);
			}
		}
	}
</script>

<style lang="scss">
	.bigbox {

		.fonttobig {
			font-size: 18px !important;
			font-weight: 600;
		}

		background-color: #f6f7f9;

		.fixtab {
			width: 100%;
			height: 44px;
			position: fixed;
			z-index: 100;
			font-size: 18px;
			font-weight: 600;
			text-align: center;
			color: #fff;
			line-height: 44px;
		}

		.bigimages {

			// position: absolute;
			image {
				width: 100%;
				height: 240px;
				// z-index: 101;
			}
		}

		.container {
			width: 100%;
			box-sizing: border-box;
			padding: 0 15px 15px 15px;
			font-size: 14px;
			line-height: 24px;
			position: absolute;
			top: 210px;
			z-index: 100;
			background-color: #f6f7f9;
			border-radius: 15px 15px 0 0;

			.classify {
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 10px;

				// background-color: blueviolet;
				// margin-top: 15px;
				.classify-item {
					text-align: center;
					width: 33%;
					// background-color: aqua;
					padding: 22px 0;

					.small-classify-image {
						text-align: center;
						width: 100%;
						height: 60px;
						margin-bottom: 16px;
						// background-color: antiquewhite;
						border-radius: 50%;

						image {
							width: 60px;
							height: 100%;
							border-radius: 50%;
						}

					}

					.size {
						width: 40px;
						font-size: 16px;
						font-weight: 600;
					}

					.size-about {
						color: #b2b2b2;
						font-size: 12px;

					}
				}

			}


			.chang {
				margin-top: 15px;
				background-color: #fff;
				border-radius: 5%;
				padding: 20px 16px;

				.outpatient {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.swiper-item-main-item {
						width: 25%;
						height: 70px;
						text-align: center;
						margin: 8px auto;

						image {
							width: 60%;
							height: 60%;
						}

						text {
							display: block;
						}
					}
				}


				.chang-title {
					display: flex;

					.outpatient-chang {
						width: 40px;
						font-size: 15px;
						margin-right: 12px;
					}

					.in-hospital-chang {
						width: 40px;
						font-size: 15px;
					}
				}

				.swiper-item {
					height: 600px;
				}

				.swiper-item-main {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.swiper-item-main-item {
						width: 25%;
						height: 70px;
					}
				}


			}

			.feature {
				margin-top: 15px;
				background-color: #fff;
				border-radius: 5%;
				padding: 20px 16px;

				.feature-title {
					font-size: 18px;
					font-weight: 600
				}

				.feature-main {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					&>:nth-child(1).feature-item {

						color: #7eccba;
					}

					&>:nth-child(2).feature-item {

						color: #d08365;
					}

					&>:nth-child(3).feature-item {

						color: #5886e8;
					}

					&>:nth-child(4).feature-item {

						color: #4a85ee;
					}

					&>:nth-child(5).feature-item {

						color: #7bc1ae;
					}

					.feature-item {
						width: 45%;
						position: relative;
						height: 90px;
						border: 1px solid #eee;
						// background-image: url(../../static/c1.png);
						margin: 16px 0 0 0;
						border-radius: 5px;
						box-sizing: border-box;
						padding: 16px 12px;

						.feature-item-title {
							font-size: 16px;
							z-index: 100;
							position: relative;
						}

						.feature-bgimg {
							width: 100%;
							height: 90px;
							position: absolute;
							top: 0;
							left: 0;
						}

						.minititle {
							font-size: 12px;
							z-index: 100;
							position: relative;
						}
					}
				}
			}
		}

		::deep .swiper {
			height: 250px !important;
		}


	}
</style>